import { GlobalOutlined } from "@ant-design/icons";
import { Dropdown, MenuProps, Space, Typography } from "antd";
import React, { useState } from "react";
import { localItem } from "../constant";

export default function LangSwitch() {
	const [localValue, setLocalValue] = useState<any>({
		key: "zh-CN",
		label: "中文简体"
	});
	const switchLangClick: MenuProps["onClick"] = ({ key }) => {
		// @ts-ignore
		const local = localItem.filter(item => item?.key === key);
		// @ts-ignore
		setLocalValue(local[0]);
	};
	return (
		<Dropdown
			trigger={["hover"]}
			menu={{
				items: localItem,
				selectable: true,
				onClick: switchLangClick,
				selectedKeys: [localValue.key]
			}}
		>
			<Typography style={{ cursor: "pointer" }}>
				<Space align="center" size={6}>
					<GlobalOutlined />
					{localValue?.label}
				</Space>
			</Typography>
		</Dropdown>
	);
}
